<template>
  <div id="order" class="order"></div>
</template>

<script>
// 引入echarts的方法 init
import { init } from "echarts";
export default {
  // 外部参数
  props: {
    // 标题
    title: {
      type: String,
    },
    // 图例
    lengend: {
      type: Array,
    },
    // // x轴数据
    // xData: {
    //   type: Array,
    // },
    // // y轴数据
    // yData: {
    //   type: Array,
    // },
    options: {
      type: Object,
    },
  },
  // 方法
  methods: {
    // 画线
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = init(document.getElementById("order"));

      // 指定图表的配置项和数据
      let option = (option = {
        title: {
          left: 10,
          top: 10,
          text: this.title,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: this.legend,
        },
        xAxis: [
          {
            type: "category",
            data: this.options.xData,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",

            interval: 50,
          },
        ],
        series: [
          {
            name: "订单金额",
            type: "bar",
            data: this.options.orderData,
          },
        ],
      });

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
      // 窗口大小改变
    handleResize() {
      this.myChart.resize(); // 只要窗口大小改变 echarts跟着容器变化
    },
  },
  // 生命周期
  mounted() {
        // 监听窗口大小改变
    window.addEventListener("resize", this.handleResize);
    this.drawLine();
  
  },
  watch: {
    options: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.drawLine(); // 重新绘制
      },
    },
  },
  // 销毁前
  beforeDestroy() {
    // 解绑事件 [性能优化]
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>

<style lang="less" scoped>
.order {
  width: 100%;
  height: 800px;
  background-color: #fff;
  margin-top: 20px;
}
</style>
